<template>
  <Row type="flex" :gutter="10">
    <Col>
      <Button type="primary" @click="loadBMap">测试1</Button>
    </Col>
    <Col>
      <Button type="primary" @click="loadTMap">测试2</Button>
    </Col>
    <!-- <Col>
      <Button type="primary" @click="loadBMap2">测试BMapGL</Button>
    </Col> -->
  </Row>
  <div id="map"></div>
  <div id="mymap"></div>
  <Row>
    <Button type="default" @click="loadTMap2">加载</Button>
    <Button type="default" @click="search">搜索</Button>
    <Button type="default" @click="testBdMap">测试2</Button>
  </Row>
</template>
<script>
import { h } from 'vue'
import MapUtil from './250923_1.js'
import coordtransform from '@/libs/coordtransform.js'
import { TdtMap, BdMap } from './class/map/map.js'
export default {
  name: '250923',
  data() {
    return {
      /**
       * @type {TdtMap}
       */
      tm: null
    }
  },
  methods: {
    loadTMap2() {
      this.tm = new TdtMap({})
    },
    search() {
      const handler = this.tm.searchKw({
        callback: (result) => {
          console.log('search', result)
        }
      })
      console.log(handler)
      //handler.search('天安门', 1)
      handler.search('乐亭通', 4)
      //handler.nextPage()
      //地址逆解析
      // this.tm.geocoderA2P('常州市恐龙园').then((res) => {
      //   console.log('地址逆解析', res)
      // })
      // this.tm.h5location().then((res) => {
      //   console.log('h5location', res)
      // })
    },
    testBdMap() {
      const handler = this.mapObj.searchKw({
        callback: (result) => {
          console.log('search', result)
        }
      })
      //handler.search('天安门', 1)
      handler.search('乐亭通', 1)
      // setTimeout(() => {
      //   handler.gotoPage(2)
      // }, 1e3)
      //地址逆解析
      this.mapObj.geocoderA2P('常州市恐龙园').then((res) => {
        console.log('地址逆解析', res)
      })
      this.mapObj.h5location().then((res) => {
        console.log('h5location', res)
      })
    },
    loadBMap2() {
      new BMap()
    },
    loadBMap() {
      const ak = 'aOpsbwrpo297oX0y1ZG7VPnwBETTGH5H'
      const data = {
        lng: '120.000284',
        lat: '31.818496',
        zoom: 16
      }
      MapUtil.loadBaiduMap(ak).then((res) => {
        //const map = new BMap.Map('map', { mapType: BMAP_HYBRID_MAP })
        const map = new BMap.Map('map')
        const point = new BMap.Point(data.lng, data.lat)
        const mapIcon = require('@/images/map.png')
        const marker = new BMap.Marker(point, {
          icon: new BMap.Icon(mapIcon, new BMap.Size(23, 36), { anchor: new BMap.Size(10, 36) })
        })
        map.addOverlay(marker)
        const label = new BMap.Label(`示意图`, {
          position: point,
          offset: new BMap.Size(-30, 5)
        })
        label.setStyle({
          width: 'auto',
          height: '30px',
          lineHeight: '30px',
          textAlign: 'center',
          background: 'url(http://s.hangjiayun.com/house/static/import/tudi-mapBg.png)',
          backgroundSize: 'cover',
          backgroundRepeat: 'no-repeat',
          fontSize: '14px',
          fontWeight: 'bold',
          color: '#fff',
          border: '0',
          padding: `0 10px`,
          backgroundPositionY: '50%'
        })
        map.addOverlay(marker)
        map.addOverlay(label)
        map.centerAndZoom(point, data.zoom)
      })
    },
    loadTMap() {
      const ak = '85867fcad84f3bbaca7113a52bf49acd'
      const data = {
        lng: '120.000284',
        lat: '31.818496',
        zoom: 16
      }
      MapUtil.loadTianMap(ak).then((res) => {
        const [lng, lat] = coordtransform.bd09towgs84(data.lng, data.lat)
        const imageURL = `http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${ak}`
        //const lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 })
        //const map = new T.Map('map', { layers: [lay] })
        const map = new T.Map('map')
        const point = new T.LngLat(lng, lat)
        const mapIcon = require('@/images/map.png')
        const icon = new T.Icon({
          iconUrl: mapIcon,
          iconSize: new T.Point(23, 36),
          iconAnchor: new T.Point(10, 36)
        })
        const marker = new T.Marker(point, { icon })
        map.addOverLay(marker)

        const word = `<span style="position: absolute; left: -10px; top: -10px; display: inline; cursor: inherit; background: url(&quot;http://s.hangjiayun.com/house/static/import/tudi-mapBg.png&quot;) 50% / cover no-repeat; border: 0px; padding: 0px 2.66667vw; white-space: nowrap; font: bold 3.73333vw / 7.73333vw arial, sans-serif; z-index: 11672432; width: auto; height: 7.73333vw; text-align: center; color: rgb(255, 255, 255);">示意图</span>`

        const label = new T.Label({
          text: word,
          offset: new T.Point(-40, 30),
          position: point
        })
        label.setOpacity(0)
        map.addOverLay(label)
        map.centerAndZoom(point, data.zoom)
      })
    }
  },
  mounted() {
    const vnode = h(
      'div',
      {
        id: 'a',
        style: {
          a: 1,
          b: 2
        },
        innerHTML: '你好'
      },
      h('div', '内容')
    )
    console.log(vnode)
    //this.loadTMap2()
    //this.mapObj = new BdMap({})
  }
}
</script>

<style lang="scss" scoped>
#map,
#mymap {
  height: 200px;
  border: 1px solid #000;
  //visibility: hidden;
}
</style>
